<!DOCTYPE html>
<html>

<head>
    <!-- Import the component -->
    <script src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.1.1/dist/model-viewer.min.js"
            type="module"></script>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .centered-container {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border-color: #e5e7eb;
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>

<body>
<div class="centered-container">
    <model-viewer>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const modelViewers = document.querySelectorAll('model-viewer');

        modelViewers.forEach(modelViewer => {
            modelViewer.addEventListener('load', (event) => {
                const [material] = modelViewer.model.materials;
                material.pbrMetallicRoughness.setMetallicFactor(0.1);
                material.pbrMetallicRoughness.setRoughnessFactor(0.5);
            });
        });
    });
</script>

</body>

</html>